<template>
	<view class="wrap">
		<view class="box-body">
			<view class="countdown-wrapper">
				<image src="/static/image/banner.png"></image>
			</view>
			<!-- 商品列表 -->
			<view class="goods-wrapper">
				<view class="goods-wrap" >
					<block v-for="(item, index) in goodsList" :key="index" v-if="index < 20">
						<a class="goods" :href="`#/pages/goods/index?id=${item.id}`" target="_blank" :style="{'border-color': getColor(index)}">
							<img class="thumb" :src="item.logoUrl" />
							<view class="name elip_2">{{item.name}}</view>
							<!-- <view class="desc elip">{{item.sellerName}}</view> -->
							<view class="prices">
								<view class="price-current">{{item.price}}元</view>
							</view>
						</a>
					</block>
				</view>
			</view>
		</view>
	
	</view>
</template>

<script>
	import seckill from '@/common/config/home/seckill.config.js';
	import {
		getAccToken,
		removeAccToken,
		removeRefToken
	} from '@/userToken.js'
	import {
		encrypt,
		decrypt
	} from '@/utils/jsencrypt';
	export default {
		data() {
			return {
				...seckill,
				startTime: '14:00',
				duration: '24:00',
				timeRemaining: ['00', '00', '00'],
				moveDistance: 0,
				goodsList:[],
				banners:[],
				today:{}
			}
		},
		
		mounted() {
			// this.findAdList();
			// this.findBanners();
			this.getPushFirst()
		},
		methods: {
			getPushFirst() {
				var that = this
				uni.request({
					url: this.serverUrl + '/goods/recommend',
					method: 'GET',
					data: {
						pageNum: 1,
						pageSize: 5,
					},
					header:{
						'webuuid': encrypt(this.pageTenantId)
					},
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							that.goodsList = res.data.rows
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},
			
			findBanners() {
				uni.request({
					url: this.totalUrl + '/api/wx/posters/list',
					method: 'GET',
					data: {
						type: 2,
					},
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							this.today  = res.data.data.rows[0]
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},
			getColor(index) {
				return this.colors[index % this.colors.length];
			},
		}
	}
</script>

<style lang="scss">
	.wrap {
		background-color: $bg-color-grey;
		.box-header {
			height: 58px;
			@extend %flex-align-center;
			justify-content: space-between;
	
			.title {
				color: #333;
				font-size: 22px;
				font-weight: 500;
				line-height: 58px;
				color:#f30000;
			}
	
			.swiper-controls {
				@extend %flex-align-center;
	
				.item {
					border: 1px solid $border-color;
					width: 25px;
					height: 22px;
					padding: 3px 5px;
					display: flex;align-items: center;justify-content: center;
					text-align: center;
					cursor: pointer;
	
					.icon {
						color: #b0b0b0;
						font-weight: bold;
						transition: color .5s;
					}
	
					&:last-child {
						border-left: none;
					}
	
					&:hover {
						.icon {
							color: $color-primary;
						}
					}
	
					&.disabled {
						cursor: not-allowed;
	
						.icon {
							color: $border-color;
						}
	
						&:hover {
							.icon {
								color: $border-color;
							}
						}
					}
				}
			}
		}
	
		.box-body {
			@extend %flex-align-center;
	
			.countdown-wrapper {
				width: 143px;
				height: 211px;
				image{width: 100%;height: 100%;}
				border-top: 1px solid #e53935;
				background: #f1eded;
				text-align: center;
				@extend %flex-align-center;
				flex-wrap: wrap;
				overflow: hidden;
				justify-content: center;
				flex-direction: column;
			}
	
			.goods-wrapper {
				width: calc(100% - 143px);
				overflow: hidden;
				.goods-wrap {
					@extend %flex-align-center;
					transition: all .5s;
					.goods {
						width: 175px;
						height: 210px;
						text-align: center;
						background-color: $bg-color;
						border-top: 1px solid;
						cursor: pointer;
						flex-shrink: 0;
	
						.thumb {
							width: 110px;
							height: 110px;
							margin: 15px auto ;
						}
	
						.name {
							margin: 0 20px 3px;
							font-weight: 400;
							color: #212121;
						}
	
						.desc {
							height: 18px;
							margin: 0 20px 12px;
							font-size: 12px;
							color: #b0b0b0;
						}
	
						.prices {
							@extend %flex-align-center;
							justify-content: center;
							align-items: flex-end;
							.price-current {
								color: $color-primary;
								margin-right: 5px;
								font-size: 17px;
							}
	
							.price-original {
								color: #b0b0b0;
								text-decoration: line-through;
							}
						}
					}
				}
			}
		}
	}
</style>
